<template>
  <view class="comp-b">
    <view class="title">子组件B</view>
    <view>CompA组件传进来的值: 
      <text style="background: blue; color: white; padding: 2rpx 8rpx; font-weight: bold;">{{ fromCompA }}</text>
    </view>
    <view class="input-area">
      <text>回传值: </text>

      <input 
        type="text" 
        v-model="backValue" 
        style="background: #ddd; border: 1px solid #999; padding: 8rpx; margin: 10rpx 0;" 
      />
      <button 
        @click="callBackToParent" 
        style="background: #fff; color: #000; padding: 8rpx 15rpx; border: 1px solid #ccc;"
      >
        回传
      </button>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    fromCompA: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      backValue: "0595-2788888" 
    };
  },
  methods: {
    callBackToParent() {
      this.$emit("callBackFun", this.backValue);
    }
  }
};
</script>

<style scoped>
.comp-b {
  background: #4caf50;
  padding: 20rpx;
  margin: 20rpx 0;
  color: #000; 
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.input-area {
  display: flex;
  align-items: center;
  gap: 10rpx;
}
</style>